<template>
<div class="main-case">
  <div class="title-wrap">
    <div class="name">天元区张三丰被盗窃案</div> 
    <div class="main-info">
      <strong class="label">涉及案件：</strong>
      <span class="value">14</span> 
      <strong class="label">已破案件：</strong>
      <span class="value">14</span> 
      <strong class="label">未破案件：</strong>
      <span class="value">14</span> 
      <strong class="label">警情：</strong>
      <span class="value">14</span> 
      <strong class="label">系列案件编号：</strong>
      <span class="value">XL2018413489787341914</span>
    </div>
  </div>

  <div class="key-value-infos-table">
    <div class="table-item quarter" v-for="item in info" :key="item.prop">
      <strong class="label">{{item.label}}</strong>
      <span class="value">{{item.value}}</span>
    </div>
  </div>

  <div class="process-wrap">
    <div class="process">
      
      <div class="steps clearfix">
        <div class="step" v-for="i in 6" :key="i">
          
          <div class="date">2018-10-10</div>
          <div class="unit">接受立案</div>
          <div class="case">20180913张三丰被盗案</div>
        </div>
      </div>
    </div>
  </div>
  


</div>
</template>

<style lang="scss" scoped>
@import "../../../../src/style/_vars.scss";
.main-case{
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 2px 2px $--border-color-base;
  margin-bottom: 20px;
  background: white;
  .title-wrap{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .name{
      flex: 0 0 auto;
      // height: 50px;
      font-weight: bold;
      font-size: 20px;
      margin-right: 10px;
      line-height: 1.4;
    }
    .main-info{
      flex: 1;
      span.value{
        margin-right: 15px;
      }
    }
  }
  .process-wrap{
    border-top: 1px solid $--border-color-base;
    padding-top: 10px;
    .process{
      width: 80%;
      margin: 0 auto;
      .steps{
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        border-top: 1px solid $--color-primary;
        margin-top: 50px;
        .step{
          flex: 0 0 auto;
          position: relative;
          display: block;
          padding-top: 20px;
          text-align: center;
          >div{
            line-height: 1.4;
          }
          .case{
            position: absolute;
            width: 120px;
            top: -50px;
            margin-left: -20px;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow : hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .step:after{
          content: '';
          position:absolute;
          display: block;
          left: 50%;
          top: -8px;
          margin-left: -5px;
          width: 10px;
          height: 10px;
          border: 3px solid $--color-primary;
          border-radius: 50%;
          background: white;
        }
        .step:nth-of-type(1):before{
          content: '';
          position:absolute;
          display: block;
          left: 0%;
          top: -1px;
          margin-left: -5px;
          width: 50px;
          height: 2px;
          background: white;
        }
      }
    }
    
  }
}
</style>

<script>

export default {
  name: 'mainCase',
  components: {
  },
  props: {
  },
  data() {
    return {
      info: [
        {label: '串并编号', value: 'C2018413489787341914', prop: 'id'},
        {label: '主侦民警', value: '盗窃案', prop: 'policeman'},
        {label: '案发地域', value: '跨区县', prop: 'area'},
        {label: '登记时间', value: '2018-12-16', prop: 'registerTime'},
        {label: '主侦单位', value: '株洲市公安局芦淞区分局XX刑侦大队', prop: 'unit'},
        {label: '剩余侦办天数', value: '15天', prop: 'peroid'},
        {label: '串并要素', value: 'DNA比中、指纹比中、视频图像比中', prop: 'key'},
        {label: '串并库', value: '2DNA、指纹、足迹、视频图像库', prop: 'store'}
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

